<template>
	<view class="realestate">
		<view class="search2-top">
			<view class="search2-top-left" @click="backFn">
				<image class="search2-top-left-img" src="../../../static/images/search1/back.png" mode=""></image>
			</view>
			<view class="search2-top-center">
				不动产登记—网通办
			</view>
			<view class="search2-top-right">
				<view class="search2-top-button">
					关于
				</view>
				<view class="search2-top-button">
					订阅
				</view>
			</view>
		</view>
		<view class="adress"  v-if="adressShow=='0'">
			<image class="adress-img" src="../../static/images/realestate/adress.png" mode="widthFix"></image>
			<view class="adress-button" @click="adressFn">
				烟台市
			</view>
			<view class="emit">
				确定
			</view>
		</view>
		<view class="adress" v-if="adressShow=='1'">
			<image class="adress-img" src="../../static/images/realestate/adress1.png" mode="widthFix"></image>
			<image class="dizi" src="../../static/images/realestate/adress3.png" mode=""></image>
			<view class="yantai">
				烟台市
			</view>
			<view class="adress-btns" v-for="(item,index) in addressArr1" @click="getAdress(item)" :class="[address==item?'active':'','adress-btns']" :key="index">
				{{item}}
			</view>
			<view class="last-step" @click="lastStepFn">
				上一步
			</view>
			<view class="emit" @click="goToFn">
				确定
			</view>
		</view>
		<view class="adress"  v-if="adressShow=='2'">
			<image class="adress-img" src="../../static/images/realestate/adress2.png" mode="widthFix"></image>
			<view class="adress-fushan" v-for="item in adressArr2"  @click="getAdress1(item)"  :class="[address==item?'active':'','adress-fushan']" :key="index">
				{{item}}
			</view>
			<view class="last-step1" @click="lastStepFn1">
				上一步
			</view>
			<view class="emit1" @click="goToFn">
				确定
			</view>
		</view>
		<view class="adress"  v-if="adressShow=='3'">
			<image class="adress-img" src="../../static/images/realestate/lanshan.png" mode="widthFix"></image>
			<view class="adress-fushan" v-for="item in adressArr3"  @click="getAdress1(item)"  :class="[address==item?'active':'','adress-fushan']" :key="index">
				{{item}}
			</view>
			<view class="last-step1" @click="lastStepFn1">
				上一步
			</view>
			<view class="emit1" @click="goToFn">
				确定
			</view>
		</view>
	</view>
</template>

<script setup>
	import { ref, reactive, shallowRef } from 'vue'
	const adressShow=ref('0')
	const backFn = () => {
		uni.navigateBack(-1)
	}
	const adressFn=()=>{
		adressShow.value='1'
	}
	const addressArr1=ref(['芝罘区','福山区','莱山区','牟平区','长岛县'])
	const adressArr2=ref(['开发区','福山区'])
	const adressArr3=ref(['莱山区','高新区'])
	const lastStepFn=()=>{
		adressShow.value='0'
	}
	const lastStepFn1=()=>{
		adressShow.value='1'
		address.value=''
	}
	
	const address=ref('')
	const getAdress=(item)=>{
		if(item=='长岛县'){
			return
		}
		if(item=='福山区'){
			adressShow.value='2'
			address.value=''
		}if(item=='莱山区'){
			adressShow.value='3'
			address.value=''
		}else{
			address.value=item;
		}
		
	}
	const getAdress1=(item)=>{
		address.value=item;
	}
	
	const goToFn=()=>{
		if(address.value!=''){
			let a=address.value
			uni.navigateTo({
				url:'/pages/realestate/network?address='+a
			})
		}
		
	}
</script>

<style lang="scss" scoped>
	.realestate{
		// height: 100vh;
		
		.search2-top{
			height: 184rpx;
			background: #FFFFFF;
			border-radius: 0rpx 0rpx 0rpx 0rpx;
			opacity: 1;
			padding-top: 96rpx;
			display: flex;
			.search2-top-left{
				width: 10%;
				.search2-top-left-img{
					width: 88rpx;
					height: 88rpx;
				}
			}
			.search2-top-center{
				font-size: 34rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				color: #333333;
				width: 60%;
				padding-left: 38rpx;
				line-height: 88rpx;
			}
			.search2-top-right{
				width: 30%;
				display: flex;
				.search2-top-button{
					width: 88rpx;
					height: 48rpx;
					border-radius: 4rpx 4rpx 4rpx 4rpx;
					opacity: 1;
					border: 2rpx solid #4678F0;
					line-height: 48rpx;
					text-align: center;
					font-size: 26rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					color: #4678F0;
					margin: auto;
					margin-right: 20rpx;
				}
				
			}
			
		}
		.adress{
			width: 100%;
			position: relative;
			.adress-img{
				width: 100%;
				vertical-align: middle;   
			}
			.adress-button{
				position: absolute;
				top: 704rpx;
				left: 230rpx;
				width: 110rpx;
				height: 64rpx;
				background: #E9F7FF;
				border-radius: 8rpx 8rpx 8rpx 8rpx;
				opacity: 1;
				border: 2rpx solid #B1E3FE;
				text-align: center;
				font-size: 24rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				color: #1F55A1;
				line-height: 64rpx;
				font-weight: 700;
				
			}
			.emit{
				position: absolute;
				left: 50%;
				bottom: 266rpx;
				transform: translate(-50%,0);
				text-align: center;
				width: 346rpx;
				height: 72rpx;
				background: linear-gradient(93deg, #4089FF 0%, #0063FF 100%);
				box-shadow: 0rpx 4rpx 22rpx 0rpx #0465FF;
				border-radius: 36rpx 36rpx 36rpx 36rpx;
				opacity: 1;
				
				font-size: 28rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
				line-height: 72rpx;
				letter-spacing: 4px;
	
			}
			.emit1{
				position: absolute;
				left: 50%;
				bottom: 368rpx;
				transform: translate(-50%,0);
				text-align: center;
				width: 346rpx;
				height: 72rpx;
				background: linear-gradient(93deg, #4089FF 0%, #0063FF 100%);
				box-shadow: 0rpx 4rpx 22rpx 0rpx #0465FF;
				border-radius: 36rpx 36rpx 36rpx 36rpx;
				opacity: 1;
				
				font-size: 28rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
				line-height: 72rpx;
				letter-spacing: 4px;
			}
			.adress-btns{
				position: absolute;
				width: 110rpx;
				height: 64rpx;
				background: #E9F7FF;
				border-radius: 8rpx 8rpx 8rpx 8rpx;
				opacity: 1;
				border: 2rpx solid #B1E3FE;
				text-align: center;
				font-size: 24rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				color: #1F55A1;
				line-height: 64rpx;
				font-weight: 700;
			}
			.adress-btns:nth-child(8){
				top: 702rpx;
				left: 96rpx;
			}
			.adress-btns:nth-child(4){
				top: 606rpx;
				left: 96rpx;
			}
			.adress-btns:nth-child(5){
				top: 606rpx;
				left: 228rpx;
			}
			.adress-btns:nth-child(6){
				top: 606rpx;
				left: 360rpx;
			}
			.adress-btns:nth-child(7){
				top: 606rpx;
				left: 492rpx;
			}
			.dizi{
				width: 142rpx;
				height: 48rpx;
				position: absolute;
				top: 466rpx;
				left: 232rpx;
			}
			.yantai{
				
				position: absolute;
				top: 476rpx;
				left: 252rpx;
				font-size: 28rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
			}
			.last-step{
				position: absolute;
				bottom: 472rpx;
				left: 98rpx;
				width: 106rpx;
				height: 60rpx;
				background: #FFF0D8;
				border-radius: 8rpx 8rpx 8rpx 8rpx;
				opacity: 1;
				border: 2rpx solid #B1E3FE;
				line-height: 60rpx;
				text-align: center;
				font-size: 24rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				color: #F39900;
				
			}
			.last-step1{
				position: absolute;
				top: 606rpx;
				left: 358rpx;
				width: 106rpx;
				height: 60rpx;
				background: #FFF0D8;
				border-radius: 8rpx 8rpx 8rpx 8rpx;
				opacity: 1;
				border: 2rpx solid #B1E3FE;
				line-height: 60rpx;
				text-align: center;
				font-size: 24rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				color: #F39900;
			}
			.adress-fushan{
				position: absolute;
				width: 110rpx;
				height: 64rpx;
				background: #E9F7FF;
				border-radius: 8rpx 8rpx 8rpx 8rpx;
				opacity: 1;
				border: 2rpx solid #B1E3FE;
				text-align: center;
				font-size: 24rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				color: #1F55A1;
				line-height: 64rpx;
				font-weight: 700;
			}
			.adress-fushan:nth-child(2){
				top: 606rpx;
				left: 96rpx;
			}
			.adress-fushan:nth-child(3){
				top: 606rpx;
				left: 228rpx;
			}
			.active{
				background: #0098FF;
				border: 2rpx solid #B1E3FE;
				color: #fff;
			}
		}
	}
	
</style>